<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useSgesAStore } from './storeSgesCalA.ts'
import SGES1 from './Sges1.vue'
import SGES2 from './Sges2.vue'
import SGES3 from './Sges3.vue'
import { inject, nextTick, onMounted, onUnmounted } from 'vue'

/**
 * 方案1的设计，还差数据校验、导入导出excel文件功能
 */

interface Sges1DataType { // 传入初始化数据，不传入也不影响组件运行
  capChargeTotalSta: number, // 全站总充电容量
  powerChargeTotalSta?: number, // 全站总充电功率
  totalChargeTime?: number,  // 总充电时长
  cal_power: boolean,
  vibrant_para?: number, // 可变参数
}

const props = defineProps<{ // withDefaults给defineProps中的参数绑定默认值
  data?: Sges1DataType
}>()

const store = useSgesAStore()
const {
  capChargeTotalSta,
  powerChargeTotalSta,
  totalChargeTime,
  cal_power,
  vibrant_para,
  heightTower,
  calInfo
} = storeToRefs(store)


// 使用hooks
function initSgesStoreData(props: any) {
  /**
   * 组件首次加载时，将store中的数据初始化为用户传入的数据
   */
  if (props.data) {
    capChargeTotalSta.value = props.data.capChargeTotalSta ? props.data.capChargeTotalSta : capChargeTotalSta.value
    powerChargeTotalSta.value = props.data.powerChargeTotalSta ? props.data.powerChargeTotalSta : powerChargeTotalSta.value
    totalChargeTime.value = props.data.totalChargeTime ? props.data.totalChargeTime : totalChargeTime.value
    cal_power.value = props.data.cal_power ? props.data.cal_power : cal_power.value
    vibrant_para.value = props.data.vibrant_para ? props.data.vibrant_para : vibrant_para.value
  }
}

onUnmounted(() => {
  persistData()  // 保存数据到localStorage
})

onMounted(() => {
  nextTick(() => {  // 确保异步操作在组件渲染完毕之后执行
    let _ = localStorage.getItem('storeSgesCalA') || ''
    try {
      store.$patch(JSON.parse(_))
    } catch (e) {
      console.log('localStorage数据格式异常')
    }
  })
})
initSgesStoreData(props)

function persistData() {
  /**
   * 将当前组件的计算状态返回给调用者
   */
    // let _ = JSON.stringify({"storeId": "storeSgesCalA", state: store.$state})
  let _ = JSON.stringify(store.$state)
  localStorage.setItem('storeSgesCalA', _)
  return _
}

function setPersistData(jsonString: string) {
  try {
    store.$patch(JSON.parse(jsonString))
  } catch (e) {
    console.log('localStorage数据格式异常')
  }
}

const getColors = inject('getColors', () => {
  return {
    fgColor: '#000',
    bgColor: '#fff',
    buttonNormalColor: '#f8d7da',
    buttonHoverColor: '#90ee90'
  }
})
const { fgColor, bgColor, buttonNormalColor, buttonHoverColor } = getColors()

defineExpose({
  persistData,
  setPersistData
})
</script>

<template>
  <!--  <p>{{ props.data }}</p>  props中的数据在初始化完成后将没有任何作用 -->

  <!-- 子组件中修改data1的值，父组件中data1中的参数也会同步变化 -->
  <!--  <div :class="{error: !calInfo.success}">-->
  <div>
    <SGES1></SGES1>
    <SGES2></SGES2>
    <n-alert title="警告" type="warning" :hidden="calInfo.success" closable>
      {{ calInfo.msg }}
    </n-alert>
    <SGES3></SGES3>
  </div>

</template>

<style scoped>
.error {
  padding: 10px;
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  margin-bottom: 10px;
}

button {
  background-color: v-bind(buttonNormalColor);
  border-radius: 5px;
  padding: 2px 20px 2px 20px;
  margin: 5px;
  width: 100%;
}

button:hover {
  background-color: v-bind(buttonHoverColor);
}
</style>